<template>
	<view class="feedback-info">
		<view class="feedback-info-view">
			<view class="feedback-info-view-title">具体问题</view>
			<view class="feedback-info-view-list">
				<view v-for="(item,index) in problemList" :key="index"
					:class="selectProblemList.indexOf(item) == -1 ? '':'select-problem'" @click="selectProblem(item)">
					{{item}}
				</view>
			</view>
		</view>

		<view class="feedback-info-view">
			<view class="feedback-info-view-title">联系方式</view>
			<view class="feedback-info-view-input">
				<input type="text" v-model="phone" placeholder="请输入手机号">
			</view>
		</view>

		<view class="feedback-info-view">
			<view class="feedback-info-view-title">补充描述</view>
			<view class="feedback-info-view-textarea">
				<textarea id="5" cols="30" v-model="content" rows="5" placeholder="请详细描述在小程序中遇到的问题，描述内容不少于10个字。"></textarea>
			</view>
			<view v-if="type != '9'">
				<view class='load-img'>
					<view class='load-box'>
						<view class='img-item' v-for="(item,inedx) in fileList" :key="index">
							<image :src="item" :data-src="item" mode="aspectFill" :data-list="fileList"></image>
							<image class='icon' src="../../../static/close.png" mode="" @click='_onDelTab(inedx)'
								v-if="!uploadFlag"></image>
						</view>
						<image class='img-add' @click='_addImg' v-if="uploadFlag"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="feedback-button" @click="submit">提交</view>
	</view>
</template>

<script>
	import {
		 postProposal,
	} from '@/module/index.js'
	import {
		config
	} from '@/config/index.js'
	export default {
		props: {
			videoType: String,
		},
		data() {
			return {
				type: "",
				problemTotalList: [{
						type: "1",
						list: ['加载缓慢/失败', "卡死/黑白屏", "视频加载异常", "搜索失败", "无法登录", "广告异常", '闪退', "其他"]
					},
					{
						type: "2",
						list: ['描述不符', "商品/内容质量差", "内容侵权/抄袭", "内容存在违规", "服务态度差"]
					},
					{
						type: "3",
						list: ['小程序建议', "问题咨询", "其他"]
					},
					{
						type: "4",
						list: ['色情低俗', "诱导下载/交易", '恶意营销', "隐私信息收集", '与服务类目不符', "涉嫌违法犯罪", '侵权', "其他"]
					},
					{
						type: "5",
						list: ['描述不符', "其他"]
					},
					{
						type: "9",
						list: ['播放卡顿', "黑屏", "无声音"]
					},
				],
				problemList: [],
				fileList: [],
				uploadFlag: true,
				selectProblemList: [],
				phone:"",
				content:"",
			}
		},
		methods: {
			selectProblem(item) {
				if (this.selectProblemList.indexOf(item) == -1) {
					this.selectProblemList.push(item)
				} else {
					this.selectProblemList = this.selectProblemList.filter((v) => {
						return item != v
					})
				}
			},
			// 点击加号进入手机相册，并进行图片选择
			_addImg() {
				let that = this;
				if (that.fileList.length >= 3) {
					uni.showToast({
						title: "最多支持3张图片",
						icon: "none"
					})
					return;
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						uni.showLoading({
							title: '图片上传中'
						});
						that.setFile(res.tempFilePaths)
					}
				})
			},
			setFile(data) {
				let _this = this;
				uni.uploadFile({
					url: config.base_url + 'Upload/ossUploadImage', //接口地址
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token
					filePath: data[0],
					name: 'file',
					success: (res) => {
						let data = JSON.parse(res.data)
						let url = data.data.info.info.url;

						// 选中图片
						if (_this.fileList.indexOf(url) == -1) {
							_this.fileList.push(url);
						}
						uni.hideLoading();
						if (_this.fileList.length >= 3) {
							_this.uploadFlag = false
						} else {
							_this.uploadFlag = true
						}
					}
				});
			},
			// 点击进行图片删除
			_onDelTab(index) {
				// 获取图片索引
				this.fileList.splice(index, 1);
				if (this.fileList.length < 3) {
					this.uploadFlag = true
				}
			},
			getProblemList() {
				this.problemList = this.problemTotalList.filter((item) => {
					return item.type == this.type
				})[0]?.list
			},
			submit(){
				if(this.selectProblemList.length == 0){
					uni.showToast({
						title: "请选择要反馈的具体问题！",
						icon: "none"
					})
					return
				}
				if(!this.phone){
					uni.showToast({
						title: "请填写联系方式！",
						icon: "none"
					})
					return
				}
				if(!this.content){
					uni.showToast({
						title: "请填写补充描述！",
						icon: "none"
					})
					return
				}
				let data = {
					title:this.selectProblemList,
					phone:this.phone,
					content:this.content,
					images:this.fileList,
				}
				if(uni.getStorageSync('environment') == 'official_account'){
					data.official_account_id = uni.getStorageSync('login')?.official_account_id
				}else{
					data.app_id = tt.getEnvInfoSync().microapp.appId
				}
				postProposal(data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: "反馈成功！",
							icon: "success"
						})
						// let stoTimer = setTimeout(() => {
						// 	clearTimeout(stoTimer)
						// 	stoTimer = null
						// 	uni.navigateBack({
						// 		delta: 1,
						// 	})
						// }, 2500)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
		onLoad(options) {
			if (options?.type) {
				this.type = options.type
				this.getProblemList()
				this.selectProblemList = []
				this.phone = ""
				this.content = ''
				this.fileList = []
			}
		}, 
		mounted() {
			if (this.videoType) {
				this.type = this.videoType
				this.getProblemList()
			}
		},
	}
</script>

<style scoped lang="scss">
	.feedback-info {
		padding: 0 30rpx;
		margin: 10rpx 0;
		font-size: 24rpx;

		.feedback-info-view {
			margin: 50rpx 0;
		}

		.feedback-info-view-title {
			font-weight: 800;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.feedback-info-view-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			>view:nth-child(3n+2) {
				margin-left: 5%;
				margin-right: 5%;
			}

			>view {
				width: 30%;
				text-align: center;
				padding: 15rpx 0rpx;
				margin: 10rpx 0;
				background-color: #FBFAFA;
			}
		}

		.feedback-info-view-input {
			>input {
				height: 60rpx;
				margin-top: 20rpx;
				border-bottom: 1rpx solid #EEE9E9;
			}
		}

		.feedback-info-view-textarea {
			>textarea {
				border: 1rpx solid #EEE9E9;
				padding: 20rpx;
				letter-spacing: 2rpx;
			}
		}
	}

	/* 上传图片 */
	.load-name {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.load-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.img-item,
	.img-add {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		margin: 20rpx 20rpx 0 0;
	}

	.img-add {
		border: 1px solid #ccc;
	}

	.img-add:after {
		width: 1rpx;
		height: 50rpx;
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #ccc;
	}

	.img-add:before {
		position: absolute;
		top: 50%;
		right: 31%;
		width: 50rpx;
		height: 1rpx;
		content: " ";
		display: inline-block;
		background-color: #ccc;
	}

	.img-item {
		margin-right: 20rpx;
	}

	.img-item image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx !important;
		height: 40rpx !important;
	}

	.feedback-button {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 80rpx;
		padding: 20rpx;
		width: 88%;
		margin: auto;
		text-align: center;
		border-radius: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		font-weight: 600;
		background: linear-gradient(to bottom, #FF6347, #d81e06);
	}

	.select-problem {
		background-color: #FF6347 !important;
		color: #FFFFFF;
	}
</style>